<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <div id="wrap"></div>
    <script>
      var arr = [
        {
          imgs: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202410112149_8c1b7e0aa8f1aca565ca4da1b3f609e6.png?thumb=1&w=300&h=300&f=webp&q=90",
          title: "Redmi Buds 6 青春版",
          content: "42dB深度主动降噪 | 双麦A通话抗风噪 | 12.4mm超大镀钛动圈",
          price: "139元",
        },
        {
          imgs: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202410112149_8c1b7e0aa8f1aca565ca4da1b3f609e6.png?thumb=1&w=300&h=300&f=webp&q=90",
          title: "Redmi Buds 6 青春版",
          content: "42dB深度主动降噪 | 双麦A通话抗风噪 | 12.4mm超大镀钛动圈",
          price: "139元",
        },
        {
          imgs: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202410112149_8c1b7e0aa8f1aca565ca4da1b3f609e6.png?thumb=1&w=300&h=300&f=webp&q=90",
          title: "Redmi Buds 6 青春版",
          content: "42dB深度主动降噪 | 双麦A通话抗风噪 | 12.4mm超大镀钛动圈",
          price: "139元",
        },
        {
          imgs: "https://cdn.cnbj1.fds.api.mi-img.com/nr-pub/202410112149_8c1b7e0aa8f1aca565ca4da1b3f609e6.png?thumb=1&w=300&h=300&f=webp&q=90",
          title: "Redmi Buds 6 青春版",
          content: "42dB深度主动降噪 | 双麦A通话抗风噪 | 12.4mm超大镀钛动圈",
          price: "139元",
        },
      ];
      var wrap = document.getElementById("wrap");
      for (var i = 0; i < arr.length; i++) {
        wrap.innerHTML += `
                        <img src="${arr[i].imgs}">
                        <div>${arr[i].title}</div>
                        <div>${arr[i].content}</div>
                        <div>${arr[i].price}</div>
                        `;
      }
    </script>
  </body>
</html>
